<template>
    <div v-loading="loading">
        <div>

            <el-carousel indicator-position="outside" height="420px">
                <el-carousel-item v-for="item in bhtList" :key="item.id">
                    <div style="background-size: cover" @click="$goto(item.url)"
                         :style="{'background-image': 'url('+item.image+')',width:'100%', height: '420px'}">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div>
        <e-container>
            <div style="margin: 10px 0 0 0">
            <e-module-model-box title="人气排行榜">
                <!-- 左边框：景点人气排行榜 -->
                <div style="float: left; width: 50%; padding-left: 10px;">
                    <e-container>
                        <div style="float: left; width: 45%; padding-left: 10px;">
                            <e-module-model-box title="景点人气榜">
                                <div style="display: flex; flex-direction: column;">
                                    <!-- 使用 JavaScript 对 jingdianxinxilist1 数组进行排序，并限制最多显示五个景点 -->
                                    <div v-for="(r, index) in sortedJingdianxinxilist.slice(0, 5)" :key="r.id" style="margin-bottom: 10px; display: flex; justify-content: space-between;">
                                        <!-- 使用 router-link 实现点击跳转 -->
                                        <router-link :to="'/jingdianxinxidetail?id=' + r.id" style="text-decoration: none; color: inherit; width: 100%;">
                                            <!-- 左侧显示序号和景点名称 -->
                                            <div style="display: flex; align-items: center;">
                                                <div style="flex: 1;">{{ index + 1 }}. {{ r.jingdianmingcheng }}</div>
                                                <!-- 右侧显示票价 -->
                                                <div>{{ r.renqi }}</div>
                                            </div>
                                        </router-link>
                                    </div>
                                    <!-- 更多信息按钮 -->
                                    <router-link 
                                        :to="{
                                            path: '/jingdianxinxi',
                                            query: {
                                                page: 1,
                                                pagesize: 12
                                            }
                                        }"
                                        style="margin-top: 10px; text-decoration: none;"
                                    >
                                        更多信息
                                    </router-link>
                                </div>
                            </e-module-model-box>
                        </div>
                    </e-container>
                </div>



                <!-- 右边框：美食人气排行榜 -->
                <div style="float: left; width: 50%; padding-left: 10px;">
                    <e-container>
                        <div style="float: left; width: 45%; padding-left: 10px;">
                            <e-module-model-box title="美食人气榜">
                                <div style="display: flex; flex-direction: column;">
                                    <!-- 使用 JavaScript 对 sorteddifangmeishilist 数组进行排序，并限制最多显示五种美食 -->
                                    <div v-for="(r, index) in sorteddifangmeishilist.slice(0, 5)" :key="r.id" style="margin-bottom: 10px;">
                                        <!-- 点击跳转至详情页 -->
                                        <router-link :to="'/difangmeishidetail?id=' + r.id" style="text-decoration: none; color: inherit; width: 100%; display: flex; justify-content: space-between; align-items: center;">
                                            <!-- 左侧显示序号和美食名称 -->
                                            <div>{{ index + 1 }}. {{ r.mingcheng }}</div>
                                            <!-- 右侧显示价格 -->
                                            <div>{{ r.jiage }}</div>
                                        </router-link>
                                    </div>
                                    <!-- 更多信息按钮 -->
                                    <router-link 
                                        :to="{
                                            path: '/difangmeishi',
                                            query: {
                                                page: 1,
                                                pagesize: 12
                                                // 可根据需要添加其他参数，如 meishibianhao、mingcheng 等
                                            }
                                        }"
                                        style="margin-top: 10px; text-decoration: none;"
                                    >
                                        更多信息
                                    </router-link>
                                </div>
                            </e-module-model-box>
                        </div>
                    </e-container>
                </div>



                <!-- 清除浮动 -->
                <div style="clear: both;"></div>
            </e-module-model-box>
            </div>
        </e-container>
        </div>


        <div>
            <e-container>
                <div style="margin:10px 0 0 0">
                    <e-module-model-box title="人气景点">
                        <el-row :gutter="30">
                            <el-col v-for="r in jingdianxinxilist1" :md="6" :key="r.id" style="margin-bottom: 20px">
                                <e-module-products
                                        :title="r.jingdianmingcheng"
                                        :price="r.piaojia" :description="r.miaoshu"
                                        :image="r.tupian"
                                        :image-height="100"
                                        :is-scale="true"
                                        :to="'/jingdianxinxidetail?id='+r.id">

                                </e-module-products>
                            </el-col>
                        </el-row>


                    </e-module-model-box>

                </div>

            </e-container>
        </div>
        <div>
            <e-container>
                <div style="margin:10px 0 0 0">
                    <e-module-model-box title="地方美食">
                        <el-row :gutter="30">
                            <el-col v-for="r in difangmeishilist2" :md="6" :key="r.id" style="margin-bottom: 20px">
                                <e-module-products
                                        :title="r.mingcheng"
                                        :price="r.jiage" :description="r.meishijianjie"
                                        :image="r.tupian"
                                        :image-height="100"
                                        :is-scale="true"
                                        :to="'/difangmeishidetail?id='+r.id">

                                </e-module-products>
                            </el-col>
                        </el-row>


                    </e-module-model-box>

                </div>

            </e-container>
        </div>
        
        <div>
            <e-container>
                <div style="margin:10px 0 0 0">
                    <e-module-model-box title="旅游线路">


                        <el-row :gutter="20">
                            <el-col v-for="r in lvyouxianlulist3" :md="6" :key="r.id" style="margin-bottom: 20px">
                                <e-module-blog
                                        :title="r.xianlumingcheng"
                                        :price="r.jiage" :content="r.xianlujianjie"
                                        :time="r.addtime"
                                        :image="r.tupian"
                                        :image-height="80"
                                        :is-scale="true"
                                        :to="'/lvyouxianludetail?id='+r.id">

                                </e-module-blog>
                            </el-col>
                        </el-row>
                    </e-module-model-box>
                </div>
            </e-container>
        </div>

        <div>
            <e-container>
                <div style="margin:10px 0 0 0">
                    <e-module-model-box title="酒店信息">
                        <el-row :gutter="20">
                            <el-col v-for="r in jiudianlist5" :md="6" :key="r.id" style="margin-bottom: 20px">
                                <e-module-blog
                                        :title="r.jiudianmingcheng"
                                        :price="r.jiage" :content="r.jiudianjianjie"
                                        :time="r.addtime"
                                        :image="r.tupian"
                                        :image-height="80"
                                        :is-scale="true"
                                        :to="'/jiudiandetail?id='+r.id">
                                </e-module-blog>
                            </el-col>
                        </el-row>
                    </e-module-model-box>
                </div>
            </e-container>
        </div>

        <div>
            <e-container>
                <div style="margin:10px 0 0 0">
                    <e-module-model-box title="旅游资讯">


                        <div class="">
                            <e-news-list v-for="r in xinwenxinxilist4" :key="r.id"
                                         :to="'/xinwenxinxidetail?id='+r.id"
                                         :title="r.biaoti"
                                         :description="r.neirong"
                                         :len="80"
                                         :image="r.tupian">
                                <span>分类: <e-select-view module="xinwenfenlei" :value="r.fenlei" select="id"
                                                         show="fenleimingcheng"></e-select-view></span>
                                <span>添加人:{{ r.tianjiaren }}</span>
                                <span>点击率:{{ r.dianjilv }}</span>

                            </e-news-list>
                        </div>


                    </e-module-model-box>

                </div>

            </e-container>
        </div>
                <!-- 旅游攻略从这开始 -->
                <div>
            <e-container>
                <div style="margin:10px 0 0 0">
                    <el-tooltip class="item" effect="light" content="分享旅游攻略" placement="top-start">
                        <el-button @click="$goto({ path: '/admin/lvyougonglueadd' })" type="success"
                            icon="el-icon-edit"></el-button>
                    </el-tooltip>
                    <!-- 上面的el-tooltip内的内容是一个按钮，点击后跳转到添加旅游攻略的界面 -->
                    <!-- <div style="display: flex; align-items: center; justify-content: space-between;">
                        <el-button @click="$goto({ path: '/admin/lvyougonglueadd' })">添加旅游攻略</el-button>
                    </div>  -->

                    <e-module-model-box title="旅游攻略">
                        <!-- <el-divider><i class="el-icon-mobile-phone"></i></el-divider> -->

                        <div class="">
                            <e-news-list v-for="r in lvyougongluelist5" :key="r.id" :to="'/lvyougongluedetail?id='+r.id"
                                :title="r.biaoti" :description="r.neirong" :len="80" :image="r.tupian">

                                <span>添加人:{{ r.tianjiaren }}</span>
                                <span>点击率:{{ r.dianjilv }}</span>

                            </e-news-list>
                        </div>

                    </e-module-model-box>

                </div>

            </e-container>
        </div>


        <!-- 旅游攻略到这结束 -->
    </div>
</template>
<style type="text/scss" scoped lang="scss">
</style>
<script>
    import api from '@/api';
    import {extend} from '@/utils/extend';

    export default {
        data() {
            return {
                loading: false,
                bhtList: [],
                jingdianxinxilist1: [],
                difangmeishilist2: [],
                lvyouxianlulist3: [],
                xinwenxinxilist4: [],
                jiudianlist5: [],
                lvyougongluelist5: [],
            }
        },
        watch: {},
        computed: {
            sortedJingdianxinxilist() {
      // 将景点按照票价从高到低排序
      return this.jingdianxinxilist1.slice().sort((a, b) => b.renqi - a.renqi);
    },
     sorteddifangmeishilist() {
      // 将景点按照票价从高到低排序
      return this.difangmeishilist2.slice().sort((a, b) => b.jiage - a.jiage);
    }
        },
        methods: {
            loadPageData() {
                if (this.loading) return;
                this.loading = true;
                this.$get('/index').then(res => {
                    this.loading = false;
                    if (res.code == api.code.OK) {
                        extend(this, res.data);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
            },
        },
        created() {
            this.loadPageData();
        },
        mounted() {
        },
        destroyed() {
        }
    }
</script>
